import { Button, Table } from 'antd'
import React,{useRef,useState} from 'react'
// 安装命令： cnpm i xlsx
import * as XLSX from 'xlsx'

const Import = () => {
  const inpRef = useRef()


  const [pro,setPro] = useState()

  function importClick(e){
    // console.log(e.target.files);
    // 创建一个文件读取器
    const reader = new FileReader()
    // 将文件读取成数据流
    reader.readAsBinaryString(e.target.files[0])

    // 读取成功之后的回调函数
    reader.onload = ()=>{
      // 将文件数据流转换成 js 对象
      const box = XLSX.read(reader.result,{type: 'binary'})
      // 将 工作表1 中的内容读取出来
      let res = box.Sheets['工作表1']
      // 将表内容转换成 json 数据
      res = XLSX.utils.sheet_to_json(res)

      // console.log(res);
      setPro(res)

    }

  }

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    }, {
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]

  return (
    <div>
      <h1>文件导入</h1>
      <Button onClick={()=>{inpRef.current.click()}}>文件导入</Button>
      <input ref={inpRef} type="file" hidden onChange={e => {importClick(e)}} />

      <Table dataSource={pro} rowKey={'proid'} scroll={{y: 450}} columns={columns} />
    </div>
  )
}

export default Import